﻿<script type="text/template" id="basicuser-update-template">
    <div class="page-dialog" style="width:500px;">
        <el-form ref="form" :rules="rules" :model="model" label-width="80px">
            <el-form-item prop="UserName" label="用户账号">
                <el-input v-model="model.UserName" disabled></el-input>
            </el-form-item>
            <el-form-item prop="Name" label="用户姓名">
                <el-input v-model="model.Name"></el-input>
            </el-form-item>
            <el-form-item prop="Head" label="上传头像">
                <el-upload class="avatar-uploader"
                           action="/other/common/cut"
                           accept="image/png,image/jpeg"
                           :data="{dir:'head',width:88,height:88}"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :on-before="beforeAvatarUpload">
                    <img v-if="model.Head!='null.png'" :src="'/userfiles/head/'+model.Head" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item prop="Mail" label="电子邮箱">
                <el-input v-model="model.Mail"></el-input>
            </el-form-item>
            <el-form-item prop="Remark" label="用户描述">
                <el-input v-model="model.Remark" :rows="3" type="textarea"></el-input>
            </el-form-item>
        </el-form>
    </div>
</script>
<script type="text/javascript">
    var basicuserUpdate = {
        template: "#basicuser-update-template",
        data: function () {
            return {
                model: {
                    ID: "",
                    UserName: "",
                    Name: "",
                    Head: "null.png",
                    Mail: "",
                    Remark: ""
                },
                rules: {
                    Name: [{ required: true, message: "请填写用户姓名", trigger: "blur" }]
                }
            }
        },
        methods: {
            loadModel: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/user/getcurrent",
                    target: that.$parent.$el,
                    success: function (result) {
                        that.model = result.data;
                    }
                });
                workVue.dialog.handle = that.submitForm;
            },
            beforeAvatarUpload: function (file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            handleAvatarSuccess: function (res, file) {
                var that = this;
                if (res.success) {
                    that.model.Head = res.data.file;
                }
                else { that.$message.error(res.message); }
            },
            submitForm: function () {
                var that = this;
                that.$refs.form.validate((valid) => {
                    if (valid) {
                        workVue.ajax({
                            url: "/basic/user/save",
                            type: "post",
                            data: { model: that.model },
                            target: that.$parent.$el,
                            success: function (result) {
                                workVue.dialog.visible = false;
                                that.$message.success(result.message);
                            }
                        });
                    }
                })
            },
            closeDialog: function () {
                workVue.dialog.visible = false;
            }
        },
        mounted: function () {
            this.loadModel();
        }
    }
</script>